<template>
  <div class="bom-bar flex">
    <div class="select flex">
      <checkButton @click.native="clickCheck"  :is-check="isCheck"  class="c-btn"/>
      全选
    </div>
    <div class="all_count">合计:￥{{cartListAllPrice | number()}}</div>
    <div class="bin ">去计算({{cartListLength}})</div>
  </div>
</template>

<script>
    import {mapGetters} from "vuex"
    import {filters} from "../../../common/mixin";
    import CheckButton from "./CheckButton";

    export default {
        name: "BomBar",
        computed: {
            ...mapGetters(['cartListAllPrice','cartListLength','cartLists']),
            isCheck(){
                if(this.cartListLength>0){
                    return this.cartLists.every(function(item){
                        return item.check === true
                    })
                }else{
                    return false
                }

            }
        },
        components:{
          CheckButton
        },
        mixins:[filters],
        data(){
          return {
          }
        },
        methods:{
            clickCheck(){
                if(this.isCheck){
                    //todo 这里应该交个vuex mutations去处理
                    this.$store.dispatch("selectAll",false)
                }else{
                    //todo 这里应该交个vuex mutations去处理
                    //先去actions
                    this.$store.dispatch("selectAll",true)
                }
            },
        }
    }
</script>

<style scoped>
  .bom-bar {
    position: fixed;
    height: 30px;
    bottom: 49px;
    width: 100%;
    background-color: #F0F0F0;
    line-height: 34px;
    text-align: center;
  }

  .select {
    width: 17%;
    font-size: 12px;
    justify-content: center;
  }

  .all_count {
    font-size: 13px;
    width: 35%;
  }

  .bin {
    background-color: #FF8000;
    width: 30%;
    margin-left: auto;
  }
  .c-btn{
    margin: auto 0 ;
  }
</style>
